/**
 * JS javaScript
 *   与java语言没有任何的联系，语法和java是比较类似
 *   JS运行在浏览器中 而java在JVM中运行
 *   JS是脚本语言(代码文件可以直接以普通文本形式保存)，而java以.class保存
 *
 *   JS是运行在浏览器上的一种脚本语言
 *
 *   组成
 *     ECMAScript
 *     DOM 文档对象模型，与网页进行交互
 *     BOM 浏览器对象模型，与浏览器进行交互
 *
 *   特点
 *     1.解释型语言
 *       编译型语言，以操作系统为执行引擎
 *         作为编译型语言写完程序之后，通过编译期把程序编译成机器语言(计算机可以识别的二进制)文件
 *         每次执行，运行这个文件就可以了
 *         优点：速度快
 *         缺点：如果跨平台，需要从源码重新按照不同的平台编译机器码文件
 *         典型代表：C 和 C++
 *         应用领域：适合安装类的软件，编译成机器语言文件也就是打包成可执行文件
 *       解释型语言，以语言本身的解释器为引擎
 *         作为解释型语言写完程序之后，不需要编译成任何文件
 *         每次执行，通过编译器读一行代码解释执行一行
 *         优点：因为有自己的不同平台的解释器，不改变源代码的前提下随意跨平台
 *         缺点：速度慢
 *         典型代表：JS python  java是混合型语言
 *         应用领域：互联网，网站这类
 *     2.动态语言
 *       语言中的一切内容都是不确定的，相当于任务分配中的机动小组
 *       java是静态语言：String a = “”; a = 1;
 *       js是动态语言：var a = ""; a = 123;
 *       动态语言性能上没有静态语言好 但是JS应用了 JIT(just - in - time),速度还是很快的
 *     3.弱类型语言
 *       强类型语言
 *          在定义某个变量的时候，必须定义类型，做数据类型转换的时候需要加强制转换
 *       弱类型语言
 *          定义某个变量的时候，可以根据字面量的内容进行自动的转换，不需要经过强制转换
 *     4.严格区分大小写
 *       asd 和 ASD 是两个东西
 *     5.类似于C和java语言结构
 *       语法类似
 *     6.基于原型的面向对象
 *       重点 难点
 *       java中有类，通过类创建实例化对象
 *       js中没有类的概念，用对象表示一个类，通过对象可以创建出实例化对象
 *  作用
 *    1.为网页添加各种动态功能
 *    2.对浏览器事件做出响应
 *    3.能够读写HTML元素的内容
 *    4.在数据提交到服务器(后台代码)之前，对数据进行验证
 *    5.可以检测客户端的浏览器信息
 *  使用
 *    嵌入元素事件：在标签内可以对一些事件进行处理，一般不用
 *    内部脚本
 *      在 head 标签 或 body 标签中嵌入 script 标签，一般是在 head 标签中写
 *    外部脚本
 *      单独写js文件，在当前html中通过script标签进行引入
 *  语法
 *    基本原则
 *      1.区分大小写
 *      2.标识符，各种命名
 *      3.关键字和保留字
 *        java中的某些关键字在js中是保留字，但是不管是关键字还是保留字，效果都是一样的，都不能用
 *      4.注释
 *        单行 //
 *        多行 与java一样
 *      5.语句结束符号
 *        java 中以;作为一句话的结束，而且是必须要有的符号
 *        js 中也是以 ; 结尾，但是可以写也可以不写
 *        如果不写浏览器自动推断语句结束的位置，为了避免一些错误，建议以分号结尾
 *      6.严格模式
 *        js默认是非严格模式 如果需要使用严格模式 在js的上面加上 "use strict";
 *        可以避免很多的错误
 *
 *   变量
 *     可以变化的可以存储数据的容器
 *     var (variable 变量)
 *     var 变量名 = 字面量;
 *     var 变量名;
 *     变量名 = 字面量;初始定义变量的时候一定在非严格模式才可以使用
 *     var a = 10,b=20,
 *         c = 30,d = 40;
 *   数据类型
 *     弱类型语言定义变量的时候不能指定数据类型，通过字面量有引擎自动推断出变量的类型，这个过程叫做类型推导
 *     基本数据类型
 *       java：byte,short,int,long,float,double,boolean,char
 *       js:
 *          Number:把所有的数值类型，包括整型和浮点型
 *              如果直接以 .开头，相当于0.xxx
 *              如果以 .结尾，直接取整
 *              如果以 .0 结尾，为了节省空间，直接取整
 *              可以使用科学计数法(e)表示数字
 *              Number有最大值和最小值 5e-324 - 1.7976931348623157e+308
 *              如果超过了这个范围，还有正负无穷 -infinity  -  +infinity
 *              NaN(Not a Number) 非数值，当前的数据类型不是数值类型
 *                  把当前的数据类型自动转成Number类型且转型失败的时候才是NaN
 *                  转型失败之后是以一个具体的数据类型表示，而不是报错
 *                  好处就是避免程序报错
 *          Boolean:true false
 *          String:js中没有字符的概念，String属于基本数据类型
 *            可以使用单引号或者双引号表示
 *          Null:表示空，指针没有指向任何地方
 *          Undefined:未定义
 *            在定义变量的时候，没有赋初始值。
 *            因为变量没有类型的控制，不知道该以谁为默认值
 *     引用数据类型(对象类型 / Object)
 *       java：以一个类(jdk提供的类和自定义类)作为类型定义的变量，就是引用数据类型
 *       js：以对象作为类型的变量
 *       js中 数组是对象 函数是对象 对象还是对象，除了基本数据类型以外的类型都是对象
 *       js中的对象就是属性的集合
 *          属性就是属性，方法也是以属性的方式表示
 *
 *       1.内置对象
 *         需要实例化才能使用的对象
 *           Date Array String Function
 *         不需要实例化就可以使用的对象 相当于java中的静态类
 *           Math
 *       2.宿主对象
 *         DOM：Document
 *         BOM：Window Location
 *       3.自定义对象
 *         开发人员自己定义的对象，
 *         1) 通过 Object 创建子对象
 *            new Object相当于创建了一个空的对象
 *            功能上类似 在 java 中创建一个 class，只不过这个class中没有任何属性和方法
 *         2) 构造函数
 *            类似于java中在class内部定义一个构造方法(本身就是new类的时候执行的)
 *            js中可以直接以function的形式定义构造方法，通过创建的实例化对象进行使用
 *            与普通函数的区别
 *              构造函数中有 this 关键字，而普通函数没有
 *         3) JSON格式 (JavaScript Object Notation)
 *            基于js，一种轻量级的数据交换格式
 *            var 对象名 = {key:value,key:value,...}
 *   原型对象
 *       在创建构造函数之后，js引擎会自动创建一个原型对象，我们是看不见这个原型对象的
 *       通过 prototype 可以对原型对象进行修改
 *       自己创建的所有的实例化对象全部共享原型对象里的内容
 *
 *   判断数据类型
 *       变量不指定数据类型但不代表没有数据类型
 *       typeof：判断基本数据类型的方式
 *         基本数据类型的结果就是自己本身的关键字，但是是字符串类型
 *         如果判断的内容是引用数据类型，结果统一都是 object
 *       instanceof：判断引用数据类型的方式
 *   类型转换
 *      显示转换
 *        Boolean()
 *          其他类型转成Boolean类型
 *          其他任意类型的空 和 0 都表示false，其他所有都表示true
 *        Number()
 *          把其他类型转成Number类型
 *          true 和 false 分别是 1 和 0
 *          字符串 空用0代替
 *          多个小数点转换失败
 *          可以加正负号，可以在前面加0补位
 *          可以转换其他进制的内容
 *        parseInt()
 *          true 和 false 无法解析
 *          从高位开始解析，遇到了无法解析的地方直接终止
 *        parseFloat()
 *
 *        String()
 *        toString()
 *      隐式转换
 *        正负号:把其他类型的数据前加上正负号就可以转成Number类型
 *        运算符: - * /    +表示字符串拼接，包括字符串+数字=字符串
 *      运算符
 *        算数运算符：+ - * / % += --
 *        赋值运算符：= += -= *= /= %=
 *        比较运算符：!= > >= < <=
 *          ==:内容上的相等
 *          ===:内容和类型都必须相等
 *        逻辑运算符：&&  || !
 *        三元运算符(三目运算) a > b ? true : false
 *        优先级：不用背，记不住就用括号
 *
 *      流程控制
 *        判断
 *          if:条件比较
 *             单分支
 *             双分支
 *             多分支
 *          switch...case...:等值比较
 *        循环
 *          while:已知条件，先判断后执行
 *          do...while:先执行后判断
 *          for:已知次数
 *   函数
 *     内置函数
 *       常规函数
 *         alert confirm prompt
 *       数组函数
 *         静态初始化 var arr = [xxx]  /  var arr = new Array(xxxx,xxx,...)
 *         动态初始化 var arr = new Array(n)
 *       日期函数
 *          new Date();
 *       数字函数
 *          Math.random() 生成一个0-1之间的随机浮点数
 *       字符串函数
 *     自定义函数
 *       与构造函数不一样的地方，普通函数没有this
 *       function 函数名([参数,..]){
 *           函数体
 *           [return xx;]
 *       }
 *
 *   事件
 *     什么是事件
 *       是浏览器响应用户交互操作的一种机制
 *       浏览器为了响应某个事件进行函数调用的过程，叫做事件处理
 *     事件的三要素
 *       1.事件：怎么发生的
 *       2.事件源：引发事件的那个元素(标签)  发生在了谁的身上
 *       3.事件处理程序：以函数的形式通过逻辑处理这个事件  发生了什么事情
 *     事件分类
 *       鼠标事件
 *          onclick:点击鼠标左键时发生
 *          ondblclick:双击鼠标左键时发生
 *          onmousedown:单击任意一个鼠标按钮时发生
 *          onmouseup:松开任意一个鼠标按钮时发生
 *          onmousemove:鼠标在某个元素上是持续发生
 *          onmouseover:鼠标指针移除某个元素到另一个元素时发生
 *          onmouseout:鼠标指针位于某个元素上且将要移出此元素的边界时发生
 *       键盘事件
 *          onkeyup:某个键盘按键被松开时发生
 *          onkeydown：某个键盘按键被按下时发生
 *          onkeypress：某个键盘按键被按下时发生 除了一些特殊的按键
 *       表单事件
 *          onsubmit:提交事件
 *          onblur:失去焦点事件
 *          onfoucs:获取焦点事件
 *          onchange:更新事件
 *          oninput:输入事件
 *          onselect:选择事件
 *          onreset:重置事件
 *       页面事件
 *          onload:打开网页，加载页面的时候就触发，类似于初始化
 *          onunload:页面关闭时触发
 *          onbeforeunload：将要关闭页面之前触发，一般用于弹窗提示
 *    事件使用
 *       1.基于HTML元素
 *       2.基于DOM编程
 *    DOM（Document Object Model） 用于与页面进行交互的模型
 *    在js中获取html中的某个节点，然后对这个节点进行操作，有点类似于java中的反射
 *    节点：
 *      1.文档节点：整个html文档
 *      2.元素节点：在html中的每个标签，一般都使用这个节点
 *      3.文本节点：在元素内部的文本
 *      4.属性节点：在元素内部的属性值
 *      5.注释节点：在html中的注释
 *    document 对象表示的是整个文档
 *
 *    document获取元素节点的常用方法
 *      getElementById(标签的id) 常用的
 *          id一般代表唯一，获取的元素节点也是唯一的一个节点对象
 *      getElementByName(标签的name)
 *          name属性并不唯一，获取的元素节点是html中所有name属性为xxx的节点结合
 *      getElementByTagName(标签名)
 *          标签名更不唯一，获取html中所有此标签的节点集合
 *      getElementByClassName(标签的class)
 *          类名也不唯一，获取html中所有标签的class属性为xxx的节点集合
 *
 *
 *   正则表达式
 *
 *   jquery
 *     是一个简介的js库，可以实现js中的所有功能，但是实现的方式会更加的简单
 *     但是需要jquery引包
 *
 *     理念： write less ， do more 写的更少但是做更多的事情
 *     优势：
 *      轻量级
 *      最强大的部分是选择器
 *      对Dom的封装也是非常好的
 *      可靠的事件处理机制
 *      Ajax
 *      兼容性比较好
 *
 *     核心函数
 *       jQuery()  可以简写成  $()
 *       jQuery中的所有都是基于此函数
 *
 *       1.$(callback)
 *          callback是回调函数，执行完其他事情之后，回过来执行此函数
 *          作为入口函数，在当前文档载入完成后，执行指定的callback函数
 *       2.$(selector)
 *          获取选择器所确定的DOM元素对象，封装成jQuery对象
 *       3.$(DOM对象)
 *          把 已经通过js语法获取了某个DOM对象 封装成jQuery
 *          这个同样实现了  $(selector) 功能，但是有点多此一举
 *       4.$(html)
 *          可以直接把html标签内容封装为jquery对象
 *
 *     选择器
 *       1.基本选择器
 *         1.1 id选择器：$("#id")
 *         1.2 类选择器：$(".class")
 *         1.3 元素(标签)选择器：$("标签名")
 *         1.4 全选择器：$("*")
 *         1.5 组合选择器：$(".class,.class,#id,...")  / $("标签.class,标签#id,...")
 *       2.层次选择器
 *         根据元素之间的层次关系来获取特定的元素对象
 *         2.1 子级元素(级联)：$("parent children")
 *         2.2 子级元素(非级联)：$("parent > children")
 *         2.3 同级元素(非级联，后面一个元素)：$("prev + next")
 *         2.4 同级元素(级联,所有的同级元素)：$("prev ~ siblings")
 *       3.过滤选择器
 *          3.1 基本过滤选择器
 *              :first
 *              :last
 *              :not(selector)
 *              :even
 *              :odd
 *              :eq(index)
 *              :gt(index)
 *              :lt(index)
 *              :header
 *              :animated
 *          3.2 内容过滤选择器
 *              :contains(text)
 *              :empty
 *              :has(selector)
 *              :parent
 *          3.3 可见性过滤选择器
 *              :hidden
 *              :visible
 *          3.4 属性过滤选择器
 *              [attribute]
 *              [attribute=value]
 *              [attribute!=value]
 *              [attribute^=value]
 *              [attribute&=value]
 *              [attribute*=value]
 *              [][][][]...
 *          3.5 表单过滤选择器
 *              按照input标签的type类型进行选择
 *              :input
 *              :text
 *              :password
 *              :radio
 *              :checkbox
 *              :submit
 *              :image
 *              :reset
 *              :button
 *              :file
 *    通过选择器获取到的jquery对象常用的方法
 *       val 获取value值(属性)
 *       html
 *       text
 *       prop
 *       attr
 *       css
 *       addClass
 *       removeClass
 *       get
 *       each
 *
 *    事件编程
 *      绑定事件：
 *        jquery对象.on(事件名,function)
 *        jquery对象.事件名(function)
 *      移除事件：
 *        //移除当前对象的所有事件
 *        jquery对象.off()
 *        //移除当前对象的指定事件
 *        jquery对象.off("事件名")
 *        //当前jquery对象绑定的事件只能执行一次(执行一次后自动删除)
 *        jquery对象.one(事件名,function)
 *    DOM操作
 *      就是新建html标签，把这个标签封装成jquery对象，以对象的形式把标签嵌入到原html中
 *      节点对象操作
 *
 *      创建节点
 *          var a = $("<a>xxx</a>")
 *      插入节点
 *          append
 *          appendTo
 *          prepend
 *          prependTo
 *      删除节点
 *          remove:删除选择的元素，再添加回来，原元素绑定的事件不可用
 *          detach:删除选择的元素，再添加回来，原元素绑定的事件依然可用
 *          empty:清空当前标签下的所有内容
 *      复制节点
 *          clone
 *      替换节点
 *          replaceWith
 *          replaceAll
 *      包裹节点
 *          wrap:每个标签外包裹一层
 *          wrapAll：所有标签外统一包裹一层
 *      遍历节点
 *    动画效果
 *      show
 *      hide
 *      toggle
 *
 *      slideDown
 *      slideUp
 *      slideToggle
 *
 *      fadeIn
 *      fadeOut
 *      fadeToggle
 *      fadeTo
 *
 */



